<template>
	<div class="layout-main">
		<div class="share-item">
			<el-form :model="tableData" status-icon :rules="rules1" ref="tableData" label-width="100px" class="demo-ruleForm">
				<div v-if="step == 1">
					<div v-if="tabIndex == 0">
						<div class="item-con">
							<div class="item-title">分享一</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.group[0].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.group[0].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.group[0].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.group[0].img"></el-input>
							</el-form-item>	
						</div>	
						<div class="item-con">
							<div class="item-title">分享二</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.group[1].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.group[1].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.group[1].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.group[1].img"></el-input>
							</el-form-item>	
						</div>
						<div class="item-con">
							<div class="item-title">分享三</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.group[2].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.group[2].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.group[2].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.group[2].img"></el-input>
							</el-form-item>	
						</div>
						<div class="item-con">
							<div class="item-title">分享四</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.group[3].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.group[3].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.group[3].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.group[3].img"></el-input>
							</el-form-item>	
						</div>
					</div>
					<div v-if="tabIndex == 1">
						<div class="item-con">
							<div class="item-title">分享一</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.timeline[0].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.timeline[0].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.timeline[0].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.timeline[0].img"></el-input>
							</el-form-item>	
						</div>	
						<div class="item-con">
							<div class="item-title">分享二</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.timeline[1].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.timeline[1].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.timeline[1].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.timeline[1].img"></el-input>
							</el-form-item>	
						</div>
						<div class="item-con">
							<div class="item-title">分享三</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.timeline[2].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.timeline[2].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.timeline[2].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.timeline[2].img"></el-input>
							</el-form-item>	
						</div>
						<div class="item-con">
							<div class="item-title">分享四</div>
							<el-form-item label="标题" prop="title">
								<el-input v-model="tableData.timeline[3].title"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="desc">
								<el-input v-model="tableData.timeline[3].desc"></el-input>
							</el-form-item>
							<el-form-item label="链接" prop="link">
								<el-input v-model="tableData.timeline[3].link"></el-input>
							</el-form-item>
							<el-form-item label="缩略图" prop="img">
								<el-input v-model="tableData.group[3].img"></el-input>
							</el-form-item>	
						</div>
					</div>
				</div>
				<div v-if="step == 2">
					<textarea v-model="tableData.luodi"></textarea>
				</div>
				<el-form-item>	
					<el-button v-if="step == 1" @click="next">下一步</el-button>
					<el-button v-if="step == 2" type="primary" @click="submitForm('tableData')">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>	
	import { TreeToArray } from '@/utils'
	import '@/assets/less/modules/switch.less'
	export default {
		data() {
			return {
				step: 1,
				rules1: {

				},
				tableData: {
					"group": [{
							"desc": "链接1",
						  	"img": "http://www.***.com/1.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告1"
						 }, {
							"desc": "链接2",
						  	"img": "http://www.***.com/2.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告2"
						 }, {
							"desc": "链接3",
						  	"img": "http://www.***.com/3.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告3"
						 }, {
							"desc": "链接4",
						  	"img": "http://www.***.com/4.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告4"
					}],"timeline": [{
							"desc": "链接22",
						  	"img": "http://www.***.com/1.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告1"
						 }, {
							"desc": "链接2",
						  	"img": "http://www.***.com/2.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告2"
						 }, {
							"desc": "链接3",
						  	"img": "http://www.***.com/3.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告3"
						 }, {
							"desc": "链接4",
						  	"img": "http://www.***.com/4.png",
						  	"link": "http://wwww.***.com",
						  	"title": "广告4"
					}]
				}		
			}
		},
		computed: {
            tabIndex() {
                return this.$store.getters.tabIndex ? this.$store.getters.tabIndex : 0
            }
        }, 
		mounted() {		
			this.step = this.$route.query.step
			if(this.step == 1) {
				this.$store.commit('breadData', {
					pageName:'分享设置',
					tabs:[
						{
							label: '群聊',
							name: 'group',
							tab: '0',
						},{
							label: '朋友圈',
							name: 'timeline',
							tab: '1',
						}
					]
				});
			}else {
				this.$store.commit('breadData', {
				pageName:'红包项目管理',
					link:{
						to:'/manage/redAdd',
						name:'新建项目'
					},
					list:[
						{
							name: '项目列表'
						}
					]
				});
			}
		},		
		methods: {			
			// 取消提案
			next() {
				this.step = 2
			},
			submitForm () {
				// api.
			}
		}
	}
</script>
